<template>
    <div>
        <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="() => { $router.back('') }" fixed />
        <div style="height: 45px;"></div>
        <van-tabs v-model:active="active" @change="tab">
            <van-tab title="全部订单"></van-tab>
            <van-tab title="未付款"></van-tab>
            <van-tab title="已付款"></van-tab>
        </van-tabs>
        <van-empty v-if="fendata.length == 0"
            image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="你没有相关订单" />
        <div v-else>
            <van-cell-group v-for="i in fendata">
                <div style="border: 1px solid black;margin-top: 10px;">
                    <router-link :to="`/xq/${i.goods_id}`">
                        <van-cell title="订单编号" :value="i.orderId" />
                    </router-link>
                    <van-cell title="订单时间" :value="i.create_time" />
                    <van-cell title="商品名称" :value="i.product_code" />
                    <van-cell title="订单价格" :value="i.totalPrice" />
                    <van-cell title="用户信息" :value="i.username" />
                    <van-cell title="订单状态" :value="i.status == 1 ? '未付款' : '已付款'" />
                </div>
            </van-cell-group>
        </div>

    </div>
</template>

<script setup>
import { getOrderListApi } from '@/api/api'
import { ref } from 'vue';
let data = ref([])
let fendata = ref([])
let username = localStorage.getItem('username')
getOrderListApi(username).then(res => {
    console.log(res);
    data.value = res.data.data
    fendata.value = res.data.data
})
const tab = (index) => {
    if (index == 0) {
        fendata.value = data.value
    }
    if (index == 1) {
        fendata.value = data.value.filter(item => item.status == 1)
    }
    if (index == 2) {
        fendata.value = data.value.filter(item => item.status == 2)
    }
}
</script>

<style lang="scss" scoped></style>